import { Component } from 'react'
import './main.css'
import { Card } from 'antd';
import React from 'react';
import { getGoods } from '../../api/goods'
import Carousel from './Carousel';
import Video from '../video/Video';
import { NavLink } from 'react-router-dom';
// import { useNavigate } from 'react-router';

const { Meta } = Card;

export default class main extends Component {

    // nvaigate = useNavigate()

    state = {
        goods: []
    }

    cardClick() {
        // this.nvaigate('/details')
    }

    render() {
        let goods = this.state.goods


        return (

            <div>
                <Video />
                <div id='main' className='container'>
                    <ul>
                        {
                            goods.map(item => {
                                return (
                                    <NavLink to='/details'>

                                        <li key={item.id} onClick={this.cardClick}>
                                            <Card
                                                hoverable
                                                cover={<img alt="example" src={item.picture} />}
                                            >
                                                <Meta title={item.shop} description={item.shop} />
                                            </Card>
                                        </li>
                                    </NavLink>
                                )
                            })
                        }

                    </ul>
                    <Carousel />

                </div>
            </div>
        )
    }
    componentDidMount() {
        getGoods().then(res => {
            this.setState({ goods: res.resultInfo.list })
        })
    }
}